import React, { Component } from "react";
import "./index.css";

const EXP = {
  plus: 0,
  minus: 1,
  multiply: 2,
  divide: 3,
};

const CTRL = {
  reset: 0,
  revert: 1,
  percent: 2,
};

const BTNS = [
  { label: "C", type: "CTRL", value: CTRL.reset },
  { label: "+/-", type: "CTRL", value: CTRL.revert },
  { label: "%", type: "CTRL", value: CTRL.percent },
  { label: "÷", type: "EXP", value: EXP.divide },
  { label: "7", type: "NUMBER", value: "7" },
  { label: "8", type: "NUMBER", value: "8" },
  { label: "9", type: "NUMBER", value: "9" },
  { label: "×", type: "EXP", value: EXP.multiply },
  { label: "4", type: "NUMBER", value: "4" },
  { label: "5", type: "NUMBER", value: "5" },
  { label: "6", type: "NUMBER", value: "6" },
  { label: "-", type: "EXP", value: EXP.minus },
  { label: "1", type: "NUMBER", value: "1" },
  { label: "2", type: "NUMBER", value: "2" },
  { label: "3", type: "NUMBER", value: "3" },
  { label: "+", type: "EXP", value: EXP.plus },
  { label: "0", type: "NUMBER", value: "0" },
  { label: ".", type: "NUMBER", value: "." },

  { label: "=", type: "CALC", value: null },
];

export default class Calculator extends Component {
  state = {
    title: "React实战 计算器",
    // 第一个数
    firstNumber: 0,
    // 运算符：+、-、*、/
    exp: null,
    secondNumber: 0,
  };

  // 数字事件
  onNumberClick = (value) => {
    const { firstNumber, secondNumber, exp } = this.state;

    if (firstNumber.length >= 10 || secondNumber.length >= 10) {
      alert("不能超过十位数噢，请重新输入");
      this.setState({ currentNumber: 0 });
    }

    let prevNumber = exp === null ? firstNumber : secondNumber;
    if (/\./.test(prevNumber) && value === ".") {
      // 什么都不做
      return;
    }
    let newNumber = prevNumber + value;
    if (!/^0\./.test(firstNumber)) {
      // 报错历史：newNumber不是字符串类型 ※
      newNumber = newNumber.replace(/^0/, "");
    }
    if (exp === null) {
      this.setState({ firstNumber: newNumber });
    } else {
      this.setState({ secondNumber: newNumber });
    }
  };

  // 控制事件
  onCtrlClick = (ctrl) => {
    let { firstNumber, exp, secondNumber } = this.state;
    let prevNumber = exp === null ? firstNumber : secondNumber;
    switch (ctrl) {
      case CTRL.reset:
        this.setState({ firstNumber: 0, secondNumber: 0, exp: null });
        break;
      case CTRL.revert:
        // 使用-号来判断数字的正负
        prevNumber = String(-Number(prevNumber));
        if (exp === null) {
          this.setState({ firstNumber: prevNumber });
        } else {
          this.setState({ secondNumber: prevNumber });
        }
        break;
      case CTRL.percent:
        prevNumber = String(Number(prevNumber) / 100);
        if (exp === null) {
          this.setState({ firstNumber: prevNumber });
        } else {
          this.setState({ secondNumber: prevNumber });
        }
        break;
      default:
        break;
    }
  };

  // 符号事件
  onExpClick = (exp) => {
    this.setState({ exp });
  };

  // 计算事件
  onCalculateClick = () => {
    let { firstNumber, exp, secondNumber } = this.state;
    switch (exp) {
      case EXP.plus:
        firstNumber = String(Number(firstNumber) + Number(secondNumber));
        console.log(firstNumber);
        break;
      case EXP.minus:
        firstNumber = String(Number(firstNumber) - Number(secondNumber));
        break;
      case EXP.multiply:
        firstNumber = String(Number(firstNumber) * Number(secondNumber));
        break;
      case EXP.divide:
        firstNumber = String(Number(firstNumber) / Number(secondNumber));
        break;
      default:
        break;
    }

    this.setState({ firstNumber, secondNumber: 0, exp: null });
  };

  onOverLengthChange = (e) => {};

  render() {
    const { title } = this.state;
    const { firstNumber, exp, secondNumber } = this.state;
    const currentNumber = exp === null ? firstNumber : secondNumber;
    return (
      <div>
        <h2>{title}</h2>
        <div className="calc">
          <div className="calc-screen">{currentNumber}</div>

          {
            BTNS.map((btn, index) => {
              // onClick
              const onClick = {
                EXP: () => { this.onExpClick(btn.value) },
                CTRL: () => { this.onCtrlClick(btn.value) },
                NUMBER: () => { this.onNumberClick(btn.value) },
                CALC: () => { this.onCalculateClick() },
              }[btn.type];

              
              // className
              const cls = {
                EXP: 'exp',
                CTRL: 'ctrl',
                NUMBER: '',
                CALC: 'exp',
              }[btn.type];
              
              return (
                <button
                  key={btn.label}
                  // 给 0 添加 className
                  className={btn.value === "0" ? "zero" : cls}
                  onClick={onClick}
                >
                  {btn.label}
                </button>
              );
            })
          }
          
          {/*  
          <button onClick={() => this.onCtrlClick(CTRL.reset)} className="ctrl">
            C
          </button>
          <button
            onClick={() => this.onCtrlClick(CTRL.revert)}
            className="ctrl"
          >
            +/-
          </button>
          <button
            onClick={() => this.onCtrlClick(CTRL.percent)}
            className="ctrl"
          >
            %
          </button>
          <button onClick={() => this.onExpClick(EXP.divide)} className="exp">
            ÷
          </button>
          <button onClick={() => this.onNumberClick("7")}>7</button>
          <button onClick={() => this.onNumberClick("8")}>8</button>
          <button onClick={() => this.onNumberClick("9")}>9</button>
          <button onClick={() => this.onExpClick(EXP.multiply)} className="exp">
            ×
          </button>
          <button onClick={() => this.onNumberClick("4")}>4</button>
          <button onClick={() => this.onNumberClick("5")}>5</button>
          <button onClick={() => this.onNumberClick("6")}>6</button>
          <button onClick={() => this.onExpClick(EXP.minus)} className="exp">
            -
          </button>
          <button onClick={() => this.onNumberClick("1")}>1</button>
          <button onClick={() => this.onNumberClick("2")}>2</button>
          <button onClick={() => this.onNumberClick("3")}>3</button>
          <button onClick={() => this.onExpClick(EXP.plus)} className="exp">
            +
          </button>
          <button onClick={() => this.onNumberClick("0")} className="zero">
            0
          </button>
          <button onClick={() => this.onNumberClick(".")}>.</button>
           报错历史：onClick方法名：注意驼峰 ※
          <button onClick={() => this.onCalculateClick()} className="exp">
            =
          </button>
           */}
        </div>
      </div>
    );
  }
}
